<script setup lang='ts'>
interface Props {
  si: number
  data: {
    ppic: string;
    pgid: string;
    pgn: string;
    c: number;
    cl: {
      ci: string;
      cn: string;
      c: number;
    }[];
  }
}

defineOptions({ name: 'AppSportsAccordion' })
const props = defineProps<Props>()
const closeLayer = inject('closeLayer', () => { })

const isLayerOpen = ref(false)
const layerHeight = ref('0px')
const observerDomRef = ref()
const { height: observerHeight } = useElementSize(observerDomRef)

function toggleLayer() {
  // 打开
  if (!isLayerOpen.value) {
    isLayerOpen.value = true
    setTimeout(() => {
      layerHeight.value = observerHeight.value + 'px'
    }, 0);
  }
  else {
    layerHeight.value = '0px'
  }
}
function onLayerTransitionend() {
  if (layerHeight.value === '0px') {
    isLayerOpen.value = false
  }
}
function onItemClickHandler(item: {
  ci: string;
  cn: string;
  c: number;
}) {
  i18nNavigateTo(getSportsRoutePath({
    page: '/sport',
    si: `${props.si}`,
    ci: item.ci,
    cn: item.cn,
    icon: props.data.ppic,
    pgid: props.data.pgid
  }))
  closeLayer()
}
</script>

<template>
  <div class="text-[14px] font-semibold leading-[20px] tracking-[0.28px]">
    <div @click="toggleLayer" class="cursor-pointer flex relative box-border items-center pr-[16px]">
      <div class="w-[24px] h-[24px] text-[24px] mr-[12px] flex items-center">
        <AppImage :url="data.ppic" is-network>
          <BaseIcon class="text-[24px]" name="uni-vector" />
        </AppImage>
      </div>
      <div class="text-[var(--color-text-white-0)]">
        {{ data.pgn }}
        <span class="count">
          <span>{{ data.c }}</span>
        </span>
      </div>
      <div :class="[isLayerOpen ? 'opacity-100 rotate-[-180deg]' : 'opacity-50 ']"
        class="flex items-center text-[16px] w-[16px] h-[16px] top-[4px] duration-[0.3s] right-0 absolute "
        style="--tg-base-icon-color:#fff;">
        <BaseIcon name="uni-triangle" />
      </div>
    </div>

    <!-- 下拉层 -->
    <div class="layer" v-show="isLayerOpen" :style="{ height: layerHeight }" @transitionend="onLayerTransitionend">
      <div ref="observerDomRef" class="overflow-hidden">
        <div v-for="league in data.cl" :key="league.ci" class="item" @click="onItemClickHandler(league)">
          {{ league.cn }}
          <span class="count2">{{ league.c }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.count {
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 8px;
  border-radius: 10px;
}

.count2 {
  color: rgba(255, 255, 255, 0.7);
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 8px;
  white-space: nowrap;
  border-radius: 10px;
}

.layer {
  overflow: hidden;
  transition: height 0.25s;

  .item {
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
    margin-top: 20px;
    transition: color 0.3s;
    line-height: 16px;
    padding-left: 36px;
    letter-spacing: 0.36px;

    &:not(:last-of-type) {
      margin-bottom: 24px;
    }
  }
}
</style>
